{% extends 'layout.html' %}
{% load static %}
{% block CSS %}
    <link rel="stylesheet" href="{% static 'elementui/theme-chalk/index.css' %}">

    <style>
        .tableuy {

            position: absolute;
            top: 10px;
            left: 5%;

        }

        .nav_table {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            margin-right: 30px;

        }


        .table_check input[type=checkbox] {
            width: 50px;
            background-color: #f0f0f0;


        }

        .table_check input[type=text] {
            width: 300px;
        }

        .table_check select {
            width: 400px;
        }

        .resource-page {
            display: flex;
            justify-content: center;
            align-items: center;
        }


    </style>


{% endblock %}

{% block content %}
    <div id="app" class="tableuy" style="width: 70%;position:relative; margin-top: 10px;margin-left: 10%">
        <div class="nav_table">

            <div>
                <el-button type="primary" plain @click="addteam">
                    新建团队
                </el-button>

                <el-button type="danger" plain @click="delete_btn_true">打开编辑删除</el-button>
            </div>


            <div>
                <el-input placeholder="请输入员工工号" style="width: 300px" v-model="inputText" clearable
                          @clear="receive_data()">
                    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                </el-input>
            </div>


        </div>


        <div class="panel panel-default">

            <div class="panel-heading head_s">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true" style="margin-right: 2px"></span>
                团队成员列表
            </div>
            <div class="panel-body">
                <el-table
                        :cell-style="rowStyle"
                        :header-cell-style="headStyle"
                        @sort-change="sortChange"
                        :data="schArr"
                        border
                        stripe
                        style="width: 100%;text-align: center"
                        max-height="450">
                    <el-table-column
                            sortable="custom"
                            prop="id"
                            label="工号"
                            width="175">
                    </el-table-column>
                    <el-table-column
                            fixed
                            sortable="custom"
                            prop="team_name"
                            label="名称"
                            width="175">
                    </el-table-column>

                    <el-table-column
                            sortable="custom"
                            prop="member_name"
                            label="成员名"
                            width="175">

                    </el-table-column>

                    <el-table-column
                            sortable="custom"
                            prop="member_grade"
                            label="成员等级"
                            width="175">
                    </el-table-column>


                    <el-table-column
                            sortable="custom"
                            prop="customer_count"
                            label="客户数量"
                            width="170">
                    </el-table-column>

                    {##}
                    {#                    <el-table-column#}
                    {#                            prop="customer_count_contract"#}
                    {#                            label="已签约客户数量"#}
                    {#                            width="140">#}
                    {#                    </el-table-column>#}
                    {##}
                    {#                    <el-table-column#}
                    {#                            prop="customer_percent"#}
                    {#                            label="已签约占比(%)"#}
                    {#                            width="140">#}
                    {#                    </el-table-column>#}


                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="200">
                        <template slot-scope="scope">

                            <el-button icon="el-icon-s-marketing" size="mini" style="color:blue;"
                                       @click="getUserEchartData(scope.$index, schArr)"></el-button>

                            <el-button v-if="delete_btn" icon="el-icon-edit" size="mini" style="color:blue;"
                                       @click="handleEdit(scope.$index, scope.row)"></el-button>


                            <el-button
                                    v-if="delete_btn"
                                    icon="el-icon-delete" size="mini" style="color:orangered;"
                                    @click="handleDelete(scope.$index, schArr)">
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>


        <div class="resource-page" style="margin-top:15px;">
            <!-- 分页区域 -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 7, 10, 15,50]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    class="fyDiv"
                    :total="tableData.length">
            </el-pagination>
        </div>


        <el-dialog title="新建团队" width="30%" :visible.sync="dialogTeamFormVisible">
            <el-form label-position="left">

                <el-form-item label-width="100px" style="margin-right: 20px" label="团队名称">
                    <el-input v-model="add_team_name" style="width: 180px;" auto-complete="off"></el-input>

                    <el-button plain type="success" style="margin-left: 20px" @click="add_team(add_team_name)"
                               icon="el-icon-circle-plus"></el-button>
                </el-form-item>


                <el-table :cell-style="rowStyle"
                          :header-cell-style="headStyle"
                          max-height="400px"
                          :data="teamForm">
                    <el-table-column property="id" label="序号" width="200"></el-table-column>
                    <el-table-column property="name" label="团队名称" width="200"></el-table-column>
                </el-table>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTeamFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogTeamFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>


        <el-dialog
                title="员工工作进展图表"
                :modal-append-to-body='false'
                :visible.sync="chartdialogVisible"
                width="50%"
                @open="open()"
                append-to-body>
            <div id="myChart" style="width:100%;height:400px;padding-top:40px"></div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="chartdialogVisible = false">取 消</el-button>
             <el-button type="primary" @click="chartdialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>


        {#    编辑对话框#}
        <el-dialog
                title="编辑员工信息"
                :visible.sync="editdialogFormVisible"
                :close-on-click-modal="false"
                width="30%"
                :before-close="handleClose">
            <el-form :model="edit_form" label-position="left" label-width="80px" ref="edit_form">

                <el-form-item label="团队">
                    <el-select v-model="edit_form.team_name" placeholder="请选择团队">
                        <el-option v-for="item in team_choice_list" :key="item.id" :label=item.name
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="工号">
                    <el-input v-model="edit_form.id" disabled></el-input>
                </el-form-item>

                <el-form-item label="负责人">
                    <el-input v-model="edit_form.member_name" disabled></el-input>
                </el-form-item>

                <el-form-item label="级别">
                    <el-select v-model="edit_form.member_grade" placeholder="请选择级别">
                        <el-option v-for="item in level_choice_list" :key="item.id" :label=item.name
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>


            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click.native="handleCancel('edit_form')">取消</el-button>

                <el-button type="primary" @click.native="confirmEdit('edit_form')">确定</el-button>
            </div>

        </el-dialog>


    </div>



{% endblock %}



{% block JSI %}
    <!-- 引入 echarts.js -->
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/echarts.js' %}"></script>
    <script src="{% static 'axios/axios.min.js' %}"></script>
    <script src="{% static 'vue/vue.js' %}"></script>
    <script src="{% static 'elementui/index.js' %}"></script>

    <script>
        var _index;
        new Vue({

            el: '#app',
            delimiters: ["[[", "]]"],
            data: {
                teamForm: {
                    id: '',
                    name: ''
                },
                schArr: [],// 此数组会由getBlogList()函数调用由tableData[]数组提取的部分数据存入来控制页面显示数据条数
                currentPage: 1,
                pagesize: 10,
                tableData: [],
                editdialogFormVisible: false,
                dialogFormVisible: false,
                delete_btn: false,
                chartdialogVisible: false,
                dialogTeamFormVisible: false,
                formLabelWidth: '120px',
                staff_id: '',
                staff_choice: '',
                team_choice_list: [],
                level_choice_list: [],
                form: {
                    'staff': '',
                },
                edit_form: {
                    'id': '',
                    'team_name': '',
                    'member_name': '',
                    'member_grade': '',
                },
                temp_team_name: '',
                add_team_name: '',

                create_team_Form: {
                    team_name: '',
                    id: '',
                    member_name: '',
                    member_grade: '',
                    customer_count: '',
                    customer_count_contract: '',
                    customer_percent: '',
                    create_time: '',
                },
                inputText: "",    //搜索框的值
                option: {
                    title: {
                        text: 'World Population'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        //单位%
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
                    },
                    series: [
                        {
                            color: ['#00ff00'],
                            name: '2011',
                            type: 'bar',
                            data: [18203, 23489, 29034, 104970, 131744, 630230]
                        },
                    ]
                },

            },

            created() {
                this.receive_data();
            },

            methods: {

                //排序方法
                sortChange(column) {
                    //如果是staff_num字段则进行排序
                    num_sort_list = ['id', 'customer_count']

                    if (num_sort_list.indexOf(column.prop) !== -1) {
                        if (column.order === 'ascending') {
                            this.schArr.sort(function (a, b) {
                                return a[column.prop] - b[column.prop];
                            });
                        } else if (column.order === 'descending') {
                            this.schArr.sort(function (a, b) {
                                return b[column.prop] - a[column.prop];
                            });
                        }
                    } else {
                        if (column.order === 'ascending') {
                            this.schArr.sort(function (a, b) {
                                return a[column.prop].localeCompare(b[column.prop]);
                            });
                        } else if (column.order === 'descending') {
                            this.schArr.sort(function (a, b) {
                                return b[column.prop].localeCompare(a[column.prop]);
                            });
                        }
                    }


                },

                //点击编辑
                handleEdit: function (index, row) {
                    this.editdialogFormVisible = true;
                    this.edit_form = Object.assign({}, row); //这句是关键！！！
                    _index = index;
                    {#console.log(index);#}
                    {#console.log(_index);#}


                },
                // 点击确定（编辑）
                confirmEdit() {
                    var editdata = _index;
                    {#console.log(editdata);#}

                    this.tableData[editdata] = this.edit_form;
                    //获取当前时间年月日


                    this.FormVisible = false;
                    //向后台发送数据
                    axios.post('/team/edit/', {
                        content: this.edit_form,

                    }).then(response => {
                        if (!response.code) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: '修改失败',
                                type: 'error'
                            });
                        }
                        this.editdialogFormVisible = false;
                        //刷新页面
                        this.receive_data();
                    }).catch(error => {
                        console.log(error.response);
                        this.$message({
                            message: '信息修改失败',
                            type: 'error'
                        });
                    })
                },
                //delete_btn_true
                delete_btn_true() {
                    //点击打开，二次点击关闭
                    this.delete_btn = !this.delete_btn;
                },
                //点击关闭dialog
                handleClose(done) {
                    //  done();
                    //  location.reload();
                    this.editdialogFormVisible = false;
                },
                //点击取消
                handleCancel(formName) {
                    this.editdialogFormVisible = false;
                },


                add_team(team_name) {
                    axios.post('/team/post/', {
                        team_name: team_name,
                    }).then(response => {
                        if (response.data.code === 200) {
                            this.$message({
                                message: '创建成功',
                                type: 'success'
                            });
                            this.dialogTeamFormVisible = false;
                            //将数据添加到tableData中
                            this.receive_data();
                        } else {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                        }
                    }).catch(error => {
                        console.log(error);
                    })
                },
                search() {
                    if (this.inputText) {
                        {#console.log(this.inputText);#}
                        this.schArr = this.tableData.filter(item => {
                            return item.id.indexOf(this.inputText) > -1
                        })
                    } else {
                        this.schArr = this.tableData
                    }
                },
                getUserEchartData(index, row) {
                    this.chartdialogVisible = true;
                    axios.post('/dashboard/statistics/', {
                        user_num: row[index].id,
                    }).then(response => {
                        if (!response.data.code) {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                        } else {
                            {#console.log(response.data);#}
                            this.option.yAxis.data = response.data.yAxis_data;
                            this.option.title.text = response.data.title + '的客户签约率';
                            this.option.series[0].data = response.data.series_data;
                            this.option.series[0].name = '签约率';
                            this.initEchartData();
                        }
                    }).catch(error => {
                        console.log(error);
                    })
                },


                initEchartData() {
                    var dom = document.getElementById("myChart");
                    {#console.log(dom);#}
                    let myChart = echarts.init(dom, 'wonderland');
                    {#console.log('myChart', myChart)#}
                    // 绘制图表失败
                    myChart.setOption(this.option);

                    {#console.log(dom);#}
                },

                open() {
                    this.$nextTick(() => {
                        //  执行echarts方法
                        this.initEchartData()
                    })
                },

                // 根据分页设置的数据控制每页显示的数据条数及页码跳转页面刷新
                getPageData() {
                    let start = (this.currentPage - 1) * this.pagesize;
                    let end = start + this.pagesize;
                    this.schArr = this.tableData.slice(start, end);
                },
                // 分页自带的函数，当pageSize变化时会触发此函数
                handleSizeChange(val) {
                    this.pagesize = val;
                    this.getPageData();
                },
                // 分页自带函数，当currentPage变化时会触发此函数
                handleCurrentChange(val) {
                    this.currentPage = val;
                    this.getPageData();
                },
                handleDelete(index, row) {
                    //删除团队
                    this.$confirm('确认删除该成员吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post('/team/delete/', {
                            id: row[index].id,
                        }).then(resonse => {
                            if (!resonse.data.code) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                //删除该行
                                this.tableData.splice(index, 1);
                                this.receive_data();
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '删除失败!'
                                });
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },


                addteam() {
                    this.dialogTeamFormVisible = true;
                },


                headStyle() {
                    return "text-align:center"
                },

                rowStyle(index, row) {

                    return "text-align:center;color:#2d8cf0"
                },

                //接收后端EXPERIMENTAL_BASIC_API的数据
                receive_data() {
                    var self = this;

                    axios.get('/team/post/').then(function (response) {
                        //根据每页显示的数量处理数据显示个数
                        self.teamForm = response.data.team_all_list;
                        self.tableData = response.data.data;
                        self.staff_choice = response.data.staff_list;
                        self.create_team_Form = response.data.create_team_list;
                        self.team_choice_list = response.data.team_choice_list;
                        self.level_choice_list = response.data.level_choice_list;
                        self.getPageData();
                        {#console.log('self.Form', self.Form);#}

                    }).catch(function (error) {
                        console.log(error);
                    });
                }
            }
        })
    </script>




{% endblock %}